<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding:0;
			}
			#container {
				margin:20px 50px
			}
			#fruits>li {
				list-style: none;
				width:200px;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
				background-color: cadetblue;
				color: white;
				text-align: center;
				margin: 2px 0;
			}
			#fruits>li>a {
				float: right;
				text-decoration: none;
				color: white;
				position: relative;
				right: 5px;
			}
			#fruits~input {
				border: none;
				outline: none;
				font-size: 18px;
			}
			#fruits~input[type=text] {
				border-bottom: 1px solid darkgray;
				width: 200px;
				height: 50px;
				text-align: center;
			}
			#fruits~input[type=button] {
				width: 80px;
				height: 30px;
				background-color: coral;
				color: white;
				vertical-align: bottom;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<ul id="fruits">
				<!-- 删1 -->
				<!-- <li>苹果<a href="">x</a></li> -->
				<!-- 删2 -->
				<li>苹果<a href="javascript:void(0)">x</a></li>
				<li>香蕉<a href="javascript:void(0)">x</a></li>
				<li>火龙果<a href="javascript:void(0)">x</a></li>
				<li>西瓜<a href="javascript:void(0)">x</a></li>
			</ul>
			<input type="text" name="fruit" />
			<input id="ok" type="button" value="确定" />
		</div>
		<script>
			//获取所有a标签
			// 获得一个列表，算是伪数组,可以使用forEach
			var anchors = document.querySelectorAll('#fruits>li>a')
			// 获取ul标签
			const ul = document.querySelector('#fruits')
		
			// forEach 里面每个属性都要调用一次，匿名函数 变量只有一个可以不加（）括起来
			// 有=>叫箭头函数
			anchors.forEach(delAnchor => {
				delAnchor.addEventListener('click',() => {
					// 删1.坑点，无法实现想要删除的效果
					// 删完后，页面自动刷新，li标签又回来了
					// 原因：href属性没有值时，表示刷新当前页面
					// 删除a的父标签li标签，爷爷删爸爸
					//ul.removeChild(delAnchor.parentNode)
					
					// 删2.
					// 解决方法：把默认行为给屏蔽掉(在默认行为中加Javascript:void(0)) 
					ul.removeChild(delAnchor.parentNode)
				})
			})
		</script>
	</body>
</html>
